<!--
 * @Author: aster lipian1004@163.com
 * @Date: 2025-02-19 10:22:12
 * @FilePath: \aster-flowable-uniapp\src\pages\form\form-list.vue
 * @Description: 表单列表
 * Copyright (c) 2025 by Aster, All Rights Reserved.
-->
<template>
  <view class="box-sizing-b wh-full">
    <aster-sticky>
      <view class="w-full">
        <aster-back :show-title="true" :title="title" />
        <form action="/">
          <van-search
            v-model="queryParams.keyword"
            placeholder="请输入搜索关键词"
            input-align="center"
            shape="round"
            background="#ffffff"
            @search="onSearch"
          />
        </form>
      </view>
    </aster-sticky>

    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadMore"
    >
      <van-cell-group
        class="group-inset"
        v-for="(item, index) in dataList"
        :key="index"
        :border="false"
        @click="to_detail(item)"
      >
        <van-cell title-style="min-width:70%" :border="false">
          <template #title>
            <view class="card-title van-multi-ellipsis--l2">
              {{ item.dataTitle }}
            </view>
          </template>
          <template #extra>
            <dict-tag dict-type="form_status" :value="item.formStatus" size="medium" />
          </template>
        </van-cell>
        <van-cell class="sub-title">
          <template #title>
            <view>开始时间: {{ dateFormat(item.startTime, 'YYYY-MM-DD HH:mm') }}</view>
            <view>结束时间: {{ dateFormat(item.endTime, 'YYYY-MM-DD HH:mm') }}</view>
            <view class="process-info">
              <view class="user-info">
                <avatar
                  :ref="item.startUserId"
                  showY
                  :showName="false"
                  :size="60"
                  :src="item.startUserAvatar"
                  :name="item.startUserName"
                />
                <text class="ft-main margin-left-xs">{{ item.startUserName }}</text>
              </view>
              <view>
                <text>
                  {{ `在 ` + dateFormat(item.createTime, 'YYYY-MM-DD HH:mm:ss') + ` 提交` }}
                </text>
              </view>
            </view>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
    <van-floating-bubble axis="xy" icon="plus" magnetic="x" @click="handleAdd" />
  </view>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { onLoad, onPullDownRefresh, onShow } from '@dcloudio/uni-app';
  import { dateFormat } from '@/utils/dateUtils';
  import { instancePageByKeyWord } from '@/api/workflow/process';
  import AsterBack from '@/components/common/aster-back.vue';
  import Avatar from '@/components/approve/avatar.vue';
  import DictTag from '@/components/dict/dict-tag.vue';
  import { isNotEmpty } from '@/utils/is';
  import { router } from '@/utils/router';
  import config from '@/utils/config';

  /** 表单名称 */
  const title = ref('');
  /** 查询条件 */
  const queryParams = reactive<Process.CommonParams>({
    code: '',
    keyword: '',
    pageNum: 1,
    pageSize: 10,
  });
  /** 数据列表 */
  const dataList = ref<WorkTask.TaskNodeModel[]>([]);
  /** 加载状态 */
  const loading = ref(false);
  /** 加载完成 */
  const finished = ref(false);

  /** 搜索 */
  const onSearch = () => {
    queryParams.pageNum = 1;
    getList();
  };

  /** 下拉刷新 */
  onPullDownRefresh(() => {
    onRefresh();
  });

  // 刷新
  const onRefresh = () => {
    // 清空列表数据
    dataList.value = [];
    finished.value = false;
    // 默认加载第一页
    queryParams.pageNum = 1;
    // 加载数据
    getList();
  };

  /** 加载更多 */
  const loadMore = () => {
    if (dataList.value.length == 0) {
      queryParams.pageNum = 1;
    } else {
      queryParams.pageNum++;
    }
    loading.value = false;
    getList();
  };

  /** 加载数据 */
  const getList = () => {
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    // 待我处理
    instancePageByKeyWord(queryParams).then(({ data }) => {
      loading.value = false;
      // 第一页直接赋予，其他页追加
      if (queryParams.pageNum === 1) {
        dataList.value = data.list;
      } else {
        data.list.forEach((t) => dataList.value.push(t));
      }
      // 判断当前页是否为最后一页
      if (queryParams.pageNum * queryParams.pageSize > data.total) {
        finished.value = true;
      }
      uni.stopPullDownRefresh();
    });
  };

  /** 跳转详情 */
  const to_detail = (form: WorkTask.TaskNodeModel) => {
    const code = form.formCode;
    const procInstId = form.procInstId;
    router.push(config.route.process_render + '?code=' + code + '&instanceId=' + procInstId);
  };

  /** 跳转新增 */
  const handleAdd = () => {
    router.push(config.route.process_initiation + '?code=' + queryParams.code);
  };

  onLoad((option) => {
    // 从首页调转，获取要加载的页签类型
    if (isNotEmpty(option)) {
      queryParams.code = option?.code;
      title.value = option?.title;
    }
  });

  onShow(() => {
    // 刷新
    onRefresh();
  });
</script>

<style scoped lang="scss">
  .van-cell-group {
    padding: 20rpx;
  }
  .van-cell {
    padding: 6rpx 8rpx;
  }
  .card-title {
    color: $uni-text-color;
    font-weight: 600;
  }
  .sub-title {
    color: #787878;
    font-size: 28rpx;
  }
  .status {
    color: #56b77a;
    font-weight: 600;
  }
  .group-inset {
    margin: 20rpx 20rpx;
    border-radius: 32rpx;
  }
  .process-info {
    margin: 8rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .user-info {
      display: flex;
      align-items: center;
    }
  }
</style>
